<?xml version='1.0' encoding='UTF-8' ?>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:p="http://primefaces.org/ui"
               xmlns:ui="http://java.sun.com/jsf/facelets"
               xmlns:f="http://java.sun.com/jsf/core">

              <h:head>
                   <link rel="shortcut icon" href="images/favicon.ico"/> 
                   <title>JForum :: #{resourcesController.extractResource('LIVE_CHAT')}</title>
              </h:head>

              <h:body style="background-color: #111111">

                   <div id="header">
                            <ui:insert name="header" >
                                    <ui:include src="header.xhtml" />
                            </ui:insert>
                   </div>

                   <center>
                      <h:form>  
                          <p:growl id="messageGrowl" showDetail="true"/>
                          <p:panel header="#{resourcesController.extractResource('LIVE_CHAT_WELLCOME')}" 
                                   style="width:790px">
                              
                               
                                   <p:graphicImage url="images/livechat_logo.png" height="100"/>
                               
                               <center>
                                            <p:inputText size="30" 
                                                         required="true"
                                                         id="userMessage"
                                                         requiredMessage="#{resourcesController.extractResource('LIVE_CHAT_NO_MESS')}"
                                                         value="#{messageController.userMessage}"/>

                                            <p:commandButton value="#{resourcesController.extractResource('SEND')}"
                                                                       update="messageGrowl, userMessage"
                                                                       async="true"
                                                                       action="#{messageController.sendMessage(authorizationBean.user)}"/>

                                            <p:poll update="chat" interval="3"/>

                                            <h:dataTable id="chat"
                                                               value="#{messageController.chatLog}"
                                                               var="message"
                                                               cellpadding="5px"
                                                               cellspacing="5px">

                                                   <p:column style="vertical-align: top; width:250px">
                                                       <div style="font-family: Ariel; font-weight: bold; color:#ffb73d"
                                                            align="center">
                                                          <h:outputText value="#{message.username}"/>
                                                          <br/>
                                                          <h:outputText value="#{message.datetime}"
                                                                        style="font-size: 10px">
                                                              <f:convertDateTime pattern="HH:mm:ss dd.MM.yyyy"/>
                                                          </h:outputText>
                                                       </div>
                                                   </p:column>
                                                  
                                                   <p:column style="width:540px;">
                                                       <div style="word-wrap: break-word; width: 500px; font-family: Ariel; font-weight: bold;">
                                                          <h:outputText value="#{message.messageBody}"/>
                                                       </div>
                                                   </p:column>

                                            </h:dataTable>

                    </center>
                 </p:panel>
              </h:form>
           </center>   
           <ui:insert name="header" >
			<ui:include src="footer.xhtml" />
           </ui:insert>
        </h:body>

</html>
